<template>
  <div class="teacher-container">
    <h1 class="title">
      <button class="home-button" @click="goHome">主页</button>
      实验室预约系统
    </h1>
    <div class="content">
      <div class="sidebar-and-main">
        <div class="sidebar">
          <ul>
            <li @click="navigateTo('/free-labs')">查询空闲实验室</li>
            <li @click="navigateTo('/my-appointments')">我的预约</li>
            <li @click="navigateTo('/my-schedule')">我的课表</li>
          </ul>
        </div>
        <div class="main-content">
          <router-view></router-view>
        </div>
      </div>
      <button class="logout-button" @click="logout">Logout</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Teacher',
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    },
    logout() {
      this.$router.push('/'); // 或者执行登出操作，比如清除本地存储的用户信息
    },
    goHome() {
      this.$router.push('/Zhuye'); // 使用{name}来路由跳转到Zhuye.vue
    },
  },
};
</script>

<style scoped>
.teacher-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Set the height to fill the viewport */
  padding: 20px;
}
.home-button{
  color: #e1e5ea;
  margin-left:-500px;
  margin-right: 500px;
  padding: 5px;
  font-size: 20px;
  background-color: cornflowerblue;
}
.title {
  margin-top: -10px;
  margin-bottom: 20px;
  color: #e1e5ea;
  background-color: #00396f;
}
.content {
  display: flex;
  flex-grow: 1; /* Allow the content to fill the remaining space */
}
.sidebar-and-main {
  display: flex;
  height: 100%; /* Set the height to fill the content area */
}
.sidebar {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-right: 20px;
  overflow-y: auto; /* Enable scrolling if the content is too long */
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  cursor: pointer;
  padding: 8px;
  border-bottom: 1px solid #eee;
}
.sidebar li:hover {
  background-color: #f5f5f5;
}
.main-content {
  flex-grow: 1;
  overflow-y: auto; /* Enable scrolling if the content is too long */
}
.logout-button {
  position: absolute;
  margin-top: 1.5px;
  margin-right: 20px;
  top: 20px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  background-color: #4dafff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}
.logout-button:hover {
  background-color: #0095ff;
}
</style>